<template>
  <div>
    <h1 v-color>hello vue</h1>
    <h2 v-fcolor>使用全局自定义这里设置颜色</h2>
  </div>
</template>

<script>
export default {
  /**
   * 自定义指令：当内置指令不能满足需求的时候就可以使用自定义指令来扩展功能
   * 作用： 扩展功能
   * 语法：
   *  全局注册指令：可以在任意一个vue文件中使用
   *   Vue.directive("自定义指令名", {
   *       inserted(el){
   *          el: 使用指令的标签
   *       }
   *    })
   * 
   *  局部注册指令：只能在当前组件中使用
   *  directives: {
   *    自定义指令名：{
   *       inserted(el){
   *          el: 使用指令的标签
   *       }
   *    } 
   * }
   * 
   * 如何使用自定义指令呢？答：v-自定义指令名
   * 
   * */ 
  // 自定义指令，设置字体颜色为红色
  // 如何使用color这里呢？直接在标签上写v-color
  directives: {
    color: {
      inserted(el){
        // el：就是使用该指令的标签
        // console.log(13,el);
        el.style.color = "red";
      }
    }
  }
}
</script>

<style>

</style>